<template>
  <div class="radio-component" :style="{'margin-right': marginRight}">
    <input type="radio"
           :id="id"
           :name="name"
           :value="value"
           :class="className"
           :disabled="disabled"
           :required="required"
           :checked="checkedState"
           @change="onChange">
    <label :for="id">
      <slot name="input-box">
          <span class="input-box">
              <span class="input-box-circle" :class="{check: checkedState}"></span>
          </span>
      </slot>
      <slot></slot>
    </label>
  </div>
</template>

<script>
  export default {
    name: 'zz-radio',
    data () {
      return {
        checkedState: false,
        radioValue: ''
      }
    },
    props: {
      id: {
        type: String,
        default: function () {
          return 'radio-id-' + this._uid
        }
      },
      name: {
        type: String,
        default: null
      },
      value: {
        type: Number
      },
      className: {
        type: String,
        default: null
      },
      checked: {
        type: Boolean,
        default: false
      },
      required: {
        type: Boolean,
        default: false
      },
      disabled: {
        type: Boolean,
        default: false
      },
      marginRight: {
        type: String,
        default: '30px'
      }
    },
    watch: {
      checked (val) {
        this.checkedState = val
      }
    },
    mounted () {
      this.checkedState = this.checked
    },
    methods: {
      onChange () {
        this.toggle()
      },

      toggle () {
        this.$nextTick(function () {
          this.$emit('handle', this.value)
        })
      }
    }
  }
</script>

<style lang="scss">
  .radio-component {
    position: relative;
    display: inline-block;
    vertical-align: top;
    &:last-child{
      margin-right: 0;
    }
    > input {
      opacity: 0;
      position: absolute;
      top:0;
      left: 0;

      + label > .input-box {
        display: inline-block;
        border: 1px solid $color;
        border-radius: 50%;
        margin: 0 5px 0 0;
        padding: 0;
        width: 1em;
        height: 1em;
        background: #fff;
        overflow: hidden;
        vertical-align: middle;
        user-select: none;
        > .input-box-circle {
          display: block;
          margin: 50%;
          width: 0%;
          height: 0%;
          background: $color;
          border-radius: 50%;
          opacity: 0;
          transition: width 0.15s ease-in, height 0.15s ease-in, margin 0.15s ease-in;
        }
      }
    }
    .check{
      opacity: 1 !important;
      margin: 22% !important;
      width: 56% !important;
      height: 56% !important;
    }
  }
</style>
